import { useEffect, useState } from 'react'
import style from './chart.module.scss'
import Echarts from '@/components/Echarts'
import { renderCategoryRank } from '../utils/renderCategoryRank';
import { queryArticleCountByCategory } from '@/api/statistics';

export default function CategoryRankCount() {
  const [chartOptions,setChartOptions] = useState<Record<string,unknown>>()
  /**
 * 获取文章每月数量
 */
const getCategoryRank = async () => {
  const res = await queryArticleCountByCategory();
  if (res.code === 200) {
    const list = res.data || [];
    const xAxis = list.map(item=>item.name);
    const yAxis = list.map(item=>Number(item.count));
    setChartOptions(renderCategoryRank(xAxis, yAxis));
  }
};
useEffect(()=>{
  getCategoryRank()
},[])
  return (
    <div className={style['block-chart__box']}>
    <div className={`${style['block__wrap']} float__block--g`}>
      <div className={style['block__title']}>按分类统计文章数</div>
      <div className={style['block__box']}>
        {chartOptions&&<Echarts  options={chartOptions} />}
      </div>
    </div>
  </div>
  )
}
